<template>
    <div id="app">
        <transition name="fade">
            <div class="calendar-dropdown" :style="{'left':calendar3.left+'px','top':calendar3.top+'px'}" v-if="calendar3.show">
                <calendar :zero="calendar3.zero" :lunar="calendar3.lunar" :value="calendar3.value" :begin="calendar3.begin" :end="calendar3.end" @select="calendar3.select"></calendar>
            </div>
        </transition>
    </div>
</template>

<script>
    import {
        formatdate
    } from './formatdate.js'
    import calendar from './calendar.vue'
    export default {
        name: 'app',
        components: {
            calendar
        },
        data() {
            return {
                Willday:'',
                newDay:'',
                calendar3: {
                    display: this.getNowFormatDate(),
                    show: true,
                    begin: [], //可选开始日期
                    end: [], //可选结束日期
                    zero: true,
                    value:[2018,5,22], //默认日期
                    lunar: false, //显示农历
                    select: (value) => {
                        this.calendar3.show = true;
                        this.calendar3.value = value;
                        this.calendar3.display = value.join("/");
                        this.$root.$emit("timeDate",this.calendar3.display)
                        console.log(this.calendar3.display)
                    }
                },
            }
        },
        created() {
            let day = new Date();
            this.Willday = new Date(day.setDate(day.getDate() + 30)).format('yyyy-M-d');
            this.calendar3.value = [(this.newDay = this.getNowFormatDate(day).split("-")[0]),(this.newDay = this.getNowFormatDate(day).split("-")[1]),(this.newDay = this.getNowFormatDate(day).split("-")[2])];
            this.calendar3.begin = [(this.newDay = this.getNowFormatDate(day).split("-")[0]),(this.newDay = this.getNowFormatDate(day).split("-")[1]),(this.newDay = this.getNowFormatDate(day).split("-")[2])];
            this.calendar3.end = [this.Willday.split("-")[0],this.Willday.split("-")[1],this.Willday.split("-")[2]]
        },
        methods: {
            getNowFormatDate() {
                var curDate = new Date();
                var date = new Date((curDate/1000+86400)*1000);
                var seperator1 = "-";
                var seperator2 = ":";
                var month = date.getMonth() + 1;
                var strDate = date.getDate();
                if (month >= 1 && month <= 9) {
                    month = "0" + month;
                }
                if (strDate >= 0 && strDate <= 9) {
                    strDate = "0" + strDate;
                }
                var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate;
                return currentdate;
            },
            
            openByDrop(e) {
                this.calendar3.show = true;
                this.calendar3.left = e.target.offsetLeft + 19;
                this.calendar3.top = e.target.offsetTop + 70;
                e.stopPropagation();
                window.setTimeout(() => {
                    document.addEventListener("click", (e) => {
                        // this.calendar3.show = false;
                        document.removeEventListener("click", () => {}, false);
                    }, false);
                }, 1000)
            },
        }
    }
</script>

<style>
    /*demo*/
    .flex {
        box-sizing: border-box;
        display: -webkit-box;
        -webkit-box-pack: start;
        -webkit-box-align: start;
        display: -webkit-flex;
        -webkit-justify-content: space-between;
        -webkit-align-items: top;
        display: flex;
        justify-content: space-between;
        align-items: top;
        flex-flow: row wrap
    }
    .flex>div {
        margin: 10px;
        padding: 20px;
        width: 25%;
        min-width: 300px;
        border: 1px solid #eee;
        border-radius: 2px;
        position: relative;
    }
    .flex>div>span {
        position: absolute;
        left: 0px;
        top: 0px;
        padding: 2px 10px;
        font-size: 10px;
        border-radius: 0 0 2px 0;
        background: #ea6151;
        color: #fff;
    }
    .flex>div>input {
        box-sizing: border-box;
        width: 100%;
        margin-top: 20px;
        border-radius: 2px;
        border: 1px solid #dedede;
        padding: 10px;
        font-size: 16px;
        background: url() no-repeat 8px 10px;
        padding-left: 36px;
        color: #666;
    }
    /*transition*/
    .fade-enter-active,
    .fade-leave-active {
        transition: all .5s ease-in-out;
    }
    .fade-enter,
    .fade-leave-active {
        opacity: 0;
        transform: translateY(-10px);
    }
    /*下拉框*/
    .calendar-dropdown {
        margin:10px;
        background: #fff;
        padding: 20px;
        border: 1px solid #eee;
        border-radius: 2px;
        height: 276px;
        overflow: hidden;
    }

    /*弹出框*/
    .calendar-dialog {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
    }
    .calendar-dialog-mask {
        background: rgba(255, 255, 255, .5);
        width: 100%;
        height: 100%;
    }
    .calendar-dialog-body {
        background: #fff;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        padding: 20px;
        border: 1px solid #eee;
        border-radius: 2px;
    }
</style>